<template>
    <div :class = "isShow ? 'display':'noShow'">
      <div class = "title">Brilliance</div>
      <br><br>

      <div class = "panelSet">
        <div class = "item">
          <div class = "min"> Min </div>
          <div class = "value"> Panel </div>
          <div class = "max"> Max </div>
        </div>

        <div>
          <span> ▼ </span>
          <div class="Bars">
            <div class = "process" :style= "panelBar">
            </div>
          </div>
          <span> ▲ </span>
          <span id = "panelRet"> {{panelValue}} </span>
        </div>
      </div>

      <br>
      <div class = "keySet">
        <div class = "item">
          <div class = "min"> Min </div>
          <div class = "value"> Key </div>
          <div class = "max"> Max </div>
        </div>
        <div>
          <span> ◀ </span>
          <span class="Bars">
            <div class = "process" :style= "keyBar">
            </div>
          </span>
          <span> ▶ </span>
          <span id = "keyRet"> {{keyValue}} </span>
        </div>
      </div>

    </div>
</template>

<script>
  import EchoMenu from '../utils/echo-menu'
  import * as EchoKey from '../utils/echo-key'

  export default {
    data () {
      return {
        isShow: false,
        setObj: {},
        panelBar: {
          width: '0px'
        },
        keyBar: {
          width: '0px'
        },
        panelValue: 0,
        keyValue: 0
      }
    },
    watch: {
      isShow: function (newVal, oldVal) {
        if (newVal !== true) {
          return
        }
        if (EchoMenu.menu[0].value === 'Day') {
          this.setObj = EchoMenu.BrillianceSettint[0]
          this.panelValue = this.setObj.panel
          this.keyValue = this.setObj.key
          this.panelBar.width = (this.panelValue * 20) + 'px'
          this.keyBar.width = (this.keyValue * 20) + 'px'
        } else {
          this.setObj = EchoMenu.BrillianceSettint[1]
          this.panelValue = this.setObj.panel
          this.keyValue = this.setObj.key
          this.panelBar.width = (this.panelValue * 20) + 'px'
          this.keyBar.width = (this.keyValue * 20) + 'px'
        }
      }
    },
    events: {
      [EchoKey.UP] (evt) {
        this.panelValue += 1
        if (this.panelValue > 9) {
          this.panelValue = 9
        }
        this.setObj.panel = this.panelValue
        this.panelBar.width = (this.panelValue * 20) + 'px'
      },
      [EchoKey.DOWN] (evt) {
        this.panelValue -= 1
        if (this.panelValue < 0) {
          this.panelValue = 0
        }
        this.setObj.panel = this.panelValue
        this.panelBar.width = (this.panelValue * 20) + 'px'
      },
      [EchoKey.LEFT] (evt) {
        this.keyValue -= 1
        if (this.keyValue < 0) {
          this.keyValue = 0
        }
        this.setObj.key = this.keyValue
        this.keyBar.width = (this.keyValue * 20) + 'px'
      },
      [EchoKey.RIGHT_ENT] (evt) {
        this.keyValue += 1
        if (this.keyValue > 9) {
          this.keyValue = 9
        }
        this.setObj.key = this.keyValue
        this.keyBar.width = (this.keyValue * 20) + 'px'
      },
      [EchoKey.MENU_ESC] (evt) {
        this.isShow = false
      }
    }
  }
</script>

<style lang ="less">
  .title {
    text-align: left;
    background-color: white;
    font-size: 20px;
    text-indent: 10px;
  }

  .display {
    text-align: center;
    position: relative;
    top: -600px;
    left: 250px;
    width: 500px;
    height: 300px;
    background-color: white;
    color: black;
    font-size: 25px;
  }

  .min {
    display: inline-block;
    width: 100px;
  }

  .value div {
    display: inline-block;
    width: 200px;
  }

  .max {
    display: inline-block;
    width: 100px;
  }

  .Bars {
    display: inline-block;
    width: 180px;
    border: 1px solid;
    padding: 2px;
  }

  .process {
    height: 20px;
    background-color: black;
  }

  #panelRet {
    position: relative;
    left: -150px;
    color: #3B3B3B;
  }

  #keyRet {
    position: relative;
    left: -150px;
    color: #3B3B3B;
  }
</style>
